<template>
    <div style="margin-top: 20px">
       <h1 style="text-align: center">您本次获得的成绩为{{this.grade}}</h1>
        <h2 style="text-align: center">以下为您本次的答题记录</h2>
      <div style="margin-left: 100px">
         <h3>单选题</h3>
        <div class="question" v-for=" (question,index) in currentQuestions[0].questions" style="margin-bottom: 10px">
         <div >{{index+1+':'+question.content}}</div>
          <div>您选择的答案是{{currentQuestions[0].answers[index]}},标准答案为{{question.answers}}</div>
        </div>
      </div>
      <div style="margin-left: 100px">
        <h3>多选题</h3>
        <div class="question" v-for=" (question,index) in currentQuestions[1].questions" style="margin-bottom: 10px">
        <div>{{index+1+':'+question.content}}</div>
        <div>您选择的答案是{{currentQuestions[0].answers[index]}},标准答案为{{question.answers}}</div>
        </div>
      </div>
      <div style="margin-left: 100px">
        <h3>填空题</h3>
        <div class="question" v-for=" (question,index) in currentQuestions[2].questions" style="margin-bottom: 10px">
          <div>{{index+1+':'+question.content}}</div>
        <div>您选择的答案是{{currentQuestions[0].answers[index]}},标准答案为{{question.answers}}</div>
        </div>
      </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {QuestionBank} from "../constants";
  export default {
    name: 'tip',
    computed:{
      ...mapState([
        'study',
        'answerCard',
        'grade',
        'user'
      ])
    },
    data () {
      return {
        currentQuestions:[]
      }
    },
    mounted(){
      let temp=new Array(3);
      this.answerCard.forEach(val=>{
         if(val.type=='single'){
           temp[0]=val;
         }else if(val.type=='gap'){
           temp[2]=val;
         }else {
           temp[1]=val;
         }
      });
      this.currentQuestions=temp;
    },

  }
</script>

<style scoped>

</style>
